<template>
  <div class="container">
    <div class="app-conttainer">
      <el-tree
        :data="depts"
        :props="defaultProps"
        default-expand-all
        icon-class="el-icon-office-building"
        :expand-on-click-node="false"
      >
        <template #default="{data}">
          <el-row type="flex" justify="center" style="width:100%" align="middle">
            <el-col :span="6"> {{ data.name }} </el-col>
            <el-col :span="4">{{ data.type }} </el-col>
            <el-col :span="4">{{ data.managerName }}  </el-col>
            <el-col :span="4">{{ data.member || 1 }}  人  </el-col>
            <el-col :span="6">
              <el-button type="text" size="mini" @click="subClick(data.id,'edit')">编辑</el-button>
              <el-button type="text" size="mini" style="padding: 0 15px ;" @click="subClick(data.id,'del')">删除</el-button>
              <el-button type="text" size="mini" @click="subClick(data.id,'add')">新增子项</el-button>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <lian-xi :id="id" ref="editList" :show-dialog="showDialog" :list="depts" @handleClose="handleClose" />

  </div>
</template>

<script>
// import { getDepartmentsApi } from '@/api/department'
import { transListToTteeData } from '@/utils/index'
import axios from 'axios'
import lianXi from './components/lianXi.vue'
export default {
  name: 'Department',
  components: { lianXi },
  data() {
    return {
      depts: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      showDialog: false,
      id: ''
    }
  },
  created() {
    this.fn()
  },
  methods: {
    fn() {
      axios.get('http://localhost:3000/department').then(res => {
        const { data } = res
        this.depts = transListToTteeData(data, 0)
        console.log(this.depts)
      })
      // axios({
      //   method: 'get',
      //   url: 'http://localhost:3000/department'
      // }).then((res) => {
      //   console.log(res)
      // })
    },
    // 添加
    subClick(id, type) {
      if (type === 'add') {
        this.id = id
        this.showDialog = true
      } else if (type === 'edit') {
        this.showDialog = true
        this.id = id
        this.$nextTick(() => {
          this.$refs.editList.getDepartmentDetail()
        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'

        }).then(() => {
          axios({
            method: 'delete',
            url: `http://localhost:3000/department/${id}`
          })
          this.$message.success('删除成功')
          this.fn()
        })
      }
    },
    // 关闭弹窗
    handleClose(value) {
      this.fn()
      this.showDialog = value
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
